<template>

	<!-- 商品详情页 -->
	
	<view class="container">
         
		<!-- 轮播图 -->
		<swiper :active-class="swiper-item"  @click="closeOrder()" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item   v-for="(item,index) in info.productTopImg">
				
	            <image :src="item" mode="heightFix"></image>
				
			</swiper-item>
		</swiper>


		<!-- 这里是价格 -->
		<view class="product_price" @click="showOrder(false)">
			<text style="font-size: 44rpx;">￥</text>
			{{info.productPrice}}
			</view>


		<!-- 这里是商品描述 -->
		<view class="product_desc" @click="showOrder(false)">{{info.productName}}</view>


		<!-- 商品购买信息 -->
		<view class="product_info" @click="showOrder(true)">
			<view style="color: #cfcfcf;">已选</view>
			<view >购买信息</view>
			<view>{{number}}</view>
			<view class="icon">
				<uni-icons type="right" size="16"></uni-icons>

			</view>
		</view>



		<!-- 商品其他图片 -->
		<view class="bottom_img" @click="closeOrder()">
			<view style="display: flex;justify-content: center;align-items: center; margin-bottom: 44rpx;">
				<view class="thread threadLeft"></view>
				<view style="width:100%; 24rpx;color: rgba(189, 189, 189, 1);text-align: center;">商品详情</view>
				<view class="thread threadRight"></view>
			</view>
			<image :src="item" mode="widthFix"  v-for="(item,index) in info.productBottomImg"></image>
		</view>











		<!-- 购物面板 -->
		<view v-show="setOrder" class="order-box">
			<!-- 小图片 -->
			<view class="image-box-small">
				<image :src="subInfo.productDetailImg" mode="heightFix"></image>
			</view>
			<!-- 价格 -->
			<view class="product-msg">
				<view class="product_price">￥{{subInfo.productDetailPrice}}</view>
				<view class="product_name">{{info.productName}}</view>
			</view>
		
			<!-- 商品 -->
			<view class="product-buyInfo">
				<view class="info_title">产品规格</view>
				<view class="specContent">
					<block v-for="(spefic,index) in subInfoList" :key="index">
						<view class="info_buy" :class="spefic.id == subId? 'active' :''" @click="changeSpec(spefic.id)">
							{{spefic.productDetailSpecifications}}
						</view>
					</block>

				</view>

			</view>
			<!-- 购买数量 -->
			<view class="product-number">
				<view>购买数量</view>
				<view class="number_msg">
					<steeper :itemNum="number" @add="num=>toAdd(num)" @minus="num=>toMinus(num)"
						@blur="num=>toBlur(num)">
					</steeper>
				</view>
			</view>

		</view>


		<!-- 下单按钮 -->
		<view>
			<view class="bottom-box">
				<view @click="setCart()" class="bottomButton" style="background-color:  rgba(223, 161, 60, 1);">加入购物车</view>
				<view @click="toConfirm()" class="bottomButton" style="background-color: rgba(212, 48, 48, 1);">立即购买</view>
			</view>
		</view>




	</view>
</template>

<script>
	import * as ProductApi from '@/api/product/product.js'
	import * as CartApi from '@/api/cart/cart.js'
	import steeper from '@/components/stepper.vue'
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		components: {
			steeper
		},
		data() {
			return {
				info: [],
				id: 0,
				current: 0,
				mode: 'dot',
				number: 1,
				setOrder: false,
				subInfoList: [],
				subId: null,
				subquantity: 1,
				subInfo: {
					id: '',
					productDetailImg: '',
					productDetailPrice: '',
					productDetailSpecifications: '',
					productId: ''
				},
				// 规格列表
				specifiList: []



			};
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);
				this.id = receivedParams.goods_id;
				
				this.getInfo();

			} else {
				uni.$goBack();
			}


		},
		onShow() {
			this.setOrder = false;
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			//兜底代码
			//1查子商品时先判断，主商品有没有被删除
			async verifyMainProduct() {
				return new Promise(async (resolve, reject) => {
					try {
						const res = await ProductApi.selectById(this.id);
						if (res.data.code === 310) {
							uni.$toPage('/subpkg/shoppingMall/productChangeHint/productChangeHint');
							resolve(true);
						} else {
							resolve(false);
						}
					} catch (error) {
						reject(error);
					}
				});
			},



			// 查询商品详情信息
			async getInfo() {
				const res = await ProductApi.selectById(this.id);
				
				this.info = res.data.data;

				
			},
			//查询子商品信息
			async getSubInfo() {
				const {
					data: res
				} = await ProductApi.selectSubById(this.id)
				this.subInfoList = res.data;
				
				Object.keys(this.subInfoList[0]).forEach(key => {
					if (key in this.subInfo) {
						this.subInfo[key] = this.subInfoList[0][key];
					}
				});
				this.subId = this.subInfo.id;
				this.specifiList = this.subInfoList.map(item => item.productDetailSpecifications);

				// 单个商品信息
				
			},


			closeOrder() {
				this.setOrder = false;
			},



			async showOrder(flag) {
				const token = uni.getStorageSync('token') || null;
				if (token) {
					
					const virfyFlag = await this.verifyMainProduct();
					if (!virfyFlag) {
						this.setOrder = flag;
						if (flag === true) {
							this.getSubInfo();
							return;
						}
					}
				} else {
					uni.$showMsg('请先登录')
					uni.$toPage('/subpkg/login/login')
				}


			},

			async setCart() {
				
				const token = uni.getStorageSync('token') || null;
				if (token === null) {
					uni.$showMsg('请先登录')
					uni.$toPage('/subpkg/login/login')
				} else {
					if (!this.setOrder) {
						const virfyFlag = await this.verifyMainProduct();
						if (!virfyFlag) {
							this.setOrder = true;
							this.getSubInfo();
						}

					} else {
						const currentTime = new Date().getTime();
						if (currentTime - lastRequestTime < requestInterval) {
							return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
						}
						lastRequestTime = currentTime; // 更新上一次请求时间
						// 把子商品Id和数量传递到购物车

						const res = await CartApi.add(this.subId, this.number);
						const code = res.data.code;

						
						if (code == 200) {
							uni.$showMsg("已成功添加至购物车")
						}

					}

				}




			},
			//在setOrder 为true时点击购买，携带参数跳转到确认订单界面

			async toConfirm() {
				
				const token = uni.getStorageSync('token') || null;
				if (token === null) {
					uni.$showMsg('请先登录')
					uni.$toPage('/subpkg/login/login')
				} else {
					//这里携带订单id参数
					if (!this.setOrder) {
						const virfyFlag = await this.verifyMainProduct();
						if (!virfyFlag) {
							this.setOrder = true;
							this.getSubInfo();
						}
					} else {
						if (this.subId === null) {
							return uni.$showMsg('请先选择商品')
						}
						const currentTime = new Date().getTime();
						if (currentTime - lastRequestTime < requestInterval) {
							return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
						}
						lastRequestTime = currentTime; // 更新上一次请求时间
						
						uni.$toPage('/subpkg/shoppingMall/order_confirm/order_confirm', {
							subId: this.subId,
							quantity: this.number
						})

					}



				}



			},
			changeSpec(id) {
				
				this.subId = id;
				
				// 直接在 find 方法中返回条件判断的结果
				this.subInfo = this.subInfoList.find(item => item.id === this.subId);

				// 如果找不到对应的子商品，可以在这里进行处理
				if (!this.subInfo) {
					
					// 这里可以进行一些错误处理或设置默认值
				}

				
			},
			toAdd(num) {
				this.number = num;
			},
			toMinus(num) {
				this.number = num;
			},
			toBlur(num) {
				this.number = num;
			}


		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: '思源黑体';
		background-color: #f3f3f5;
		
		 
	

	}
	.container{
		width: 100%;
		height: 100vh;
	}
	

	swiper {
		overflow: hidden;
		width: 750rpx;
		height: 750rpx;
		-webkit-tap-highlight-color: rgba(0,0,0,0);

		.swiper-item,
		image {
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			width: 100%;
			height: 100%;
		}
	}


	.product_price {
		color: rgba(214, 30, 24, 1);
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 44rpx;
	}

	.product_desc {
		font-size: 36rpx;
		margin-left: 20rpx;
		margin-top: 5rpx;
		font-weight: 400;
	}

	.product_info {
		
		line-height: 122rpx;
		font-size: 32rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		width: 700rpx;
		// height: 122rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin-top: 54rpx;
	}

	.product_info view {
		flex: 1;
		text-align: center;
	}

	.num-btn {
		display: inline-block;
		margin-left: 26rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: red;
		margin: 0 40rpx;
	}

	.bottom_img {
		padding-bottom: 150rpx;
		// margin-bottom: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-top: 44rpx;
		width: 100vw;
		

		image {
			
			width: 100%;
		}
	}

	.thread {
		display: inline-block;
		width: 216rpx;
		height: 1rpx;
		background-color: rgba(217, 217, 217, 1);
	}

	.threadLeft {
		margin-left: 94rpx;
	}

	.threadRight {
		margin-right: 94rpx;
	}


	.bottom-box {
		position: fixed; // 使按钮固定于可视窗口的底部
		bottom: 0;
		left: 0;
		right: 0;
		height: 160rpx; // 设置固定高度
		background-color: #fff;
		display: flex;
		justify-content: center;

	}

	.bottomButton {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		margin: 10rpx 5rpx;
		text-align: center;
		width: 220rpx;
		height: 80rpx;
		border-radius: 26rpx;
		line-height: 80rpx;
		color: #fff;
		margin: 20rpx 20rpx;
		font-size: 28rpx;
	}

	.order-box {
		
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		z-index: 999;
		overflow: hidden;
		background-color: #fff;
		position: fixed;
		bottom: 160rpx;
		height: 1026rpx;
		width: 100%;




		.image-box-small,
		image {
			box-sizing: border-box;
			display: inline-block;
			width: 176rpx;
			height: 176rpx;
			border-radius: 8.76rpx;
			
		}

		.product-msg {
			
			
		    overflow: hidden;
			text-overflow: ellipsis;
			display: inline-block;
			position: relative;
			margin-top: 30rpx;
			// top: -30rpx;
		}

		.product_price {
			
			box-sizing: border-box;
			margin-left: 10rpx;
			
			font-size: 44rpx;
			font-weight: 700;
			
		}

		.product_name {
			padding-top: 10rpx;
			
			width: 492rpx;
			height: 90rpx;
			box-sizing: border-box;
			text-align: left;
			box-sizing: border-box;
			margin-top: 10rpx;
			margin-left: 18rpx;
			font-weight: 400;
			font-size: 32rpx;
		}

	}

	.image-box-small {
		position: relative;
		margin-top: 40rpx;
		margin-left: 34rpx;
	}



	.product-buyInfo {
		margin-left: 34rpx;
		margin-top: 60rpx;

		.info_title {
			font-weight: 400;
			font-size: 32rpx;
		}

		.specContent {
			margin-top: 15rpx;
			display: flex;
			flex-direction: row;

			.info_buy {
				margin-left: 30rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 28rpx;
				font-weight: 400;
				border: 2rpx solid rgba(243, 243, 245, 1);
				border-radius: 8rpx;
				width: 168rpx;
				height: 44rpx;
				background-color: rgba(243, 243, 245, 1);
				margin-top: 14rpx;
			}

			.active {
				border: 2rpx solid rgba(223, 161, 60, 1);
			}
		}

	}

	.product-number {
		box-sizing: border-box;
		margin-left: 34rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 64rpx);
		margin-top: 52rpx;

		view {
			display: inline-block;
			margin-right: 11rpx;
		}

		.num_btn {
			text-align: center;
			line-height: 32rpx;
			width: 32rpx;
			height: 32rpx;
			background-color: rgba(189, 189, 189, 1);
			border-radius: 50%;
		}



		.number_msg>view {

			margin-left: 42rpx;
			display: inline-block;
		}

		.number>input {
			display: inline-block;
			margin: 0 auto;
		}

		.number_msg>view:nth-child(1) {
			margin-left: 327rpx;
		}

	}
</style>